<template>
	<view>
		<TopHead :title="'订单列表'" :fhShow="flasa"></TopHead>
		<view class="tabbar-box">
			<view class="bar-item" :class="indxId==index?'barActive':''" v-for="(item,index) in barList" :key="index"
				@click="choose(item,index)">
				<text>{{item.title}}</text>
				<text></text>
			</view>
		</view>
		<view class="conbox">
			<view class="list">
				<view class="itemBox" v-for="(item,index) in list" @click="toOrderDetails(item)" :key="index">
					<view class="title1">
						<!-- <uni-icons class="icon-bars" type="bars" color="#e47917" size="20"></uni-icons> -->
						<image class="icon-bars" src="../../static/images/mine-icon2.png"></image>
						<view class="orderNo">{{item.orderId}}</view>
						<view class="state" v-if="item.status==1"><text class="dian"></text>待付款</view>
						<view class="state" v-if="item.status==2"><text class="dian"></text>已付款</view>
						<view class="state" v-if="item.status==12"><text class="dian"></text>待发货</view>
						<view class="state" v-if="item.status==13"><text class="dian"></text>待收货</view>
						<view class="state" v-if="item.status==9"><text class="dian"></text>已派单</view>
						<view class="state" v-if="item.status==3">待评价</view>
						<view class="state" v-if="item.status==8">订单完成</view>
						<view class="state" v-if="item.status==0">订单取消</view>
						<view class="state" v-if="item.status==4">申请退款</view>
					 
						<view class="state" v-if="item.status==6">退款成功</view>
					 
						<!-- 	<view class="state" v-if="item.status==7">退款/售后</view> -->
					</view>
					<view class="iten-cont" v-for="(itt,k) in item.orderItemList" :key="k">
						<image class="item-img" :src="path+itt.logo"></image>
						<view class="iten-cont-txt">
							<view class="title2">{{itt.productEntityName}}
								<view class="title2-pic">￥<text>{{(itt.price/100).toFixed(2)}}</text></view>
							</view>
							<view class="title3"><text v-for="(ite,j) in item.store.tagList"
									:key="j">{{ite}}</text><text class="num">X{{itt.amount}}</text></view>
							<view class="title4" v-for="(orderItemSpecification,index) in itt.orderItemSpecificationList" :key="index">
							{{orderItemSpecification.specificationName}}:{{orderItemSpecification.orderItemSpecificationValueList[0].value}}
							</view>
 
						</view>
					</view>
					<view class="price">
						订单金额：￥{{(item.orderPrice/100).toFixed(2)}}
					</view>
					<view class="btnBox">
						<view class="btn1" v-if="item.status==1" @click.stop="cancelOrder(item)">取消订单</view>
						<view class="btn2" v-if="item.status==1">付款</view>
						<view class="btn2" v-if="item.status==3" @click.stop="toPostEvaluate(item)">去评价</view>
					 
						<view class="btn2"
							v-if="(item.status==2 || item.status==13) && (item.orderItemList[0].useMethod==1 || item.orderItemList[0].useMethod==2 || item.orderItemList[0].useMethod==4 ) "
							@click.stop="applyRefund(item)">申请退款</view>
						<view class="btn2" v-if="item.status==13 && item.orderItemList[0].useMethod==1"
							@click.stop="showExpressage(item)">查看快递</view>
						<view class="btn2"
							v-if="item.status==2 && (item.orderItemList[0].useMethod==4)"
							@click.stop="showQRCode(item)">核销码</view>
					</view>
				</view>
				<view class="wushuju" v-if="list.length<1">暂无数据</view>
			</view>
		</view>



		<uni-popup ref="popupExpressage" is-mask-click :mask-click="false">
			<view class="popupBox2">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="closeExpressage" class="closeempty" color="#040404"
						size="20"></uni-icons>
					我的快递
				</view>
				<view class="box1">

					<view class="left-box1">
						<view class="title1">商户已经发货</view>
						<view class="title1-text">请注意查收</view>
					</view>
					<view class="right-icon-box">

						<image class="fahuoSta" src="../../static/images/fahuo-icon.png"></image>
						<image v-if="infoData.status==3" class="fahuoSta" src="../../static/images/fahuo-icon2.png">
						</image>
						<image v-if="infoData.status==4" class="fahuoSta" src="../../static/images/fahuo-icon3.png">
						</image>
					</view>
				</view>

				<view class="formlist">
					<view class="iteminput">
						快递订单号: {{orderInfo.expressNumber}}
					</view>
				</view>
				<view class="btnBox btnBox1">
					<view class="btn2" @click="handDelivery">收货</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" is-mask-click :mask-click="false">
			<view class="popupBox">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="close" class="closeempty" color="#040404"
						size="20"></uni-icons>
					我的核销码
				</view>
				<view class="formlist">
					<view class="iteminput">
						<image class="erCode" :src="qrcode"></image>
					</view>
				</view>
				<!-- 	<view class="bdBtn" @click="handData">绑定</view> -->
			</view>
		</uni-popup>
	</view>



</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				barList: [{
						title: '全部',
						id: ''
					},
					{
						title: '待付款',
						id: 1
					},
					{
						title: '待收货',
						id: 13
					},
					{
						title: '待评价',
						id: 3
					},

					// {
					// 	title: '退款/售后',
					// 	id: 7
					// },
				],
				indxId: 0, // 
				xzId: '',
				list: [], // 列表
				page: 1,
				pageSize: 10, // 
				total: 0, // 总数
				path: this.$http.tpUrl + '/', // 图片前缀
				orderInfo: "",
				qrcode: "",
			}
		},
		onLoad() {

		},
		onShow() {

			this.page = 1
			this.total = 0
			this.list = []
			this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底', this.total, this.list.length, this.page)
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
				this.$nextTick(() => {
					this.initData()
				})
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			openExpressage() {
				this.$refs.popupExpressage.open('center')
			},
			closeExpressage() {
				this.$refs.popupExpressage.close()
			},
			// 数据请求示例
			initData() {
				console.log("page", this.page, this.pageSize);
				let _this = this
				let data = {
					userId: uni.getStorageSync('id'),
					// userId: 1,
					status: this.xzId,
					page: this.page,
					pageSize: this.pageSize
				}
				console.log("data", data);
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/',
					method: 'GET',
					data: data,
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data.list]
						console.log("initData:res", res);
						_this.total = res.data.total
						console.log("initData:this.total ", _this.total);
						console.log("_this.list ", _this.list);
					}
				})
			},
			// 去详情
			toOrderDetails(item) {
				console.log(item)
				if (item.status == 1) {
					let paramsStr = `?orderId=${item.orderId}`
					console.log(paramsStr)
					uni.navigateTo({
						url: `/pages_category_page1/order/confirmOrder${paramsStr}`
					})
					return
				}
				uni.navigateTo({
					url: `/pages_category_page1/order/orderDetails?orderId=${item.orderId}`
				})
			},
			// 取消订单
			cancelOrder(item) {
				console.log(item)
				console.log('取消订单')
				var _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/' + item.orderId,
					method: 'Delete',
					data: {},
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: "订单已取消！",
							icon: 'none'
						});
						_this.list = [];
						_this.page = 1;
						_this.initData();
					}
				})
			},
			//收货
			handDelivery() {
				var orderId = this.orderInfo.orderId;
				var _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/' + orderId,
					method: 'PUT',
					data: {},
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							return;
						}
						_this.$refs.popupExpressage.close();
						_this.list = [];
						_this.page = 1;
						_this.initData();
					}
				})
			},
			// 去付款
			goPay(item) {
				console.log(item)
			},
			choose(item, index) {

				this.indxId = index
				this.xzId = item.id
				this.page = 1
				this.total = 0
				this.list = []
				this.initData()
			},
			// 去评价
			toPostEvaluate(item) {
				console.log("item", item, item.orderItemList[0].productEntityId);
				uni.navigateTo({
					url: `/pages_category_page1/mine/postEvaluate?orderId=${item.orderId}&logo=${item.orderItemList[0].logo}&productEntityName=${item.orderItemList[0].productEntityName}&productEntityId=${item.orderItemList[0].productEntityId}`
				})
			}, // 显示核销二维码
			showQRCode(item) {
				console.log(item)
				this.qrcode = this.$http.baseUrl + "/wechatApplet/customer/order/qrcode/" + item.orderId;
				console.log("	this.qrcode", this.qrcode);
				this.open();
			},
			applyRefund(item) {
				var orderId = item.orderId;
				var _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/refundApply/' + orderId,
					method: 'PUT',
					data: {},
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: "申请退款成功",
							icon: 'none'
						});
						_this.list = [];
						_this.page = 1;
						_this.initData();
					}
				})
			},
			 
			//	显示物流信息
			showExpressage(item) {
				console.log(item);
				this.openExpressage();
				this.orderInfo = item;

			},
		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.tabbar-box {
		padding: 30rpx;
		background: #f3f3f3;
		position: fixed;
		display: flex;
		top: 173rpx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.bar-item {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		/* display: inline-block; */
		flex: 1;
		margin-right: 16rpx;
		text-align: center;
	}

	.tabbar-box .bar-item:last-child {
		margin-right: 0;
	}

	.bar-item>text:nth-child(1) {}

	.bar-item>text:nth-child(2) {
		width: 50%;
		height: 8rpx;
		display: block;
		margin: 0 auto;
		margin-top: 9rpx;
	}

	.tabbar-box .barActive {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.tabbar-box .barActive>text:last-child {
		background: #e47917;
		border-radius: 4rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 290rpx;

	}

	.itemBox {
		padding: 20rpx;
		padding-bottom: 34rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		margin-top: 20rpx;
	}

	.title1 {
		display: flex;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		padding-bottom: 20rpx;
		border-bottom: 2rpx dashed #c7c7c7;
	}

	.title1 .icon-bars {
		width: 28rpx;
		height: 34rpx;
		flex-shrink: 0;
	}

	.title1 .orderNo {
		flex: 1;
		margin-left: 14rpx;

	}

	.title1 .state {
		flex-shrink: 0;

	}

	.iten-cont {
		padding: 24rpx 0 32rpx 0;
		display: flex;
		border-bottom: 2rpx dashed #c7c7c7;
	}

	.iten-cont .item-img {
		flex-shrink: 0;
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx;
		background-color: #f3f3f3;
	}

	.iten-cont-txt {
		padding-left: 18rpx;
		flex: 1;
	}

	.title2 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		position: relative;
		padding-right: 110rpx;
		/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.title2 .title2-pic {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
		line-height: 52rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -26rpx;
	}

	.title2 .title2-pic text {
		font-size: 40rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 18rpx;
		position: relative;
	}

	.title3 text {
		display: inline-block;
		line-height: 40rpx;
		background: #fff0db;
		padding: 0 18rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.title3 text:first-child {
		margin-left: 0;
	}

	.title3 .num {
		line-height: 32rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -16rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		background: none;
		padding: 0;
		margin: 0;
	}

	.title4 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 12rpx;

	}

	.price {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		text-align: right;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.btnBox {
		text-align: right;
		line-height: 78rpx;
	}

	.btnBox1 {
		text-align: center;
		line-height: 78rpx;
		margin: 10rpx;
		position: relative;
		botton: 0rpx;
		margin-top: 30rpx;
	}

	.btnBox>view {
		width: 216rpx;
		display: inline-block;
		text-align: center;
		margin-right: 20rpx;
	}

	.btnBox>view:last-child {
		margin-right: 0;
	}

	.btnBox .btn1 {
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #404040;
	}

	.btnBox .btn2 {
		background: #e47917;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
	}

	.wushuju {
		text-align: center;
		padding-top: 30rpx;
		font-size: 26rpx;
	}

	.formlist {
		padding: 0 52rpx;
	}

	.iteminput {
		/* padding-top: 74rpx;
		padding-bottom: 81rpx; */
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
	}

	.iteminput .erCode {
		width: 580rpx;
		height: 580rpx;
		display: block;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.popupBox {
		width: 690rpx;
		height: 700rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
		background-color: #e5e5e5;
	}

	.popupBox2 {
		width: 690rpx;

		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
		padding-bottom: 30rpx;
		background-color: #e5e5e5;
	}

	.popuptitle {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #5d4529;

	}

	.closeempty {
		position: absolute;
		left: 30rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.box1 {
		display: flex;
		margin: 40rpx;
	}

	.box1 .left-box1 {
		flex: 1;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 16rpx;
	}

	.box1 .right-icon-box {
		width: 158rpx;
		height: 124rpx;
		margin-right: 65rpx;
	}

	.box1 .right-icon-box .fahuoSta {
		width: 158rpx;
		height: 124rpx;
	}
</style>